<template>
  <div ref="wrapper" class="scroll-wrapper">
      <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { reactive, toRefs,ref ,onMounted} from 'vue'
export default {
    props:{
        probeType: {
            type: Number,
            default: 1
        },
        click: {
            type: Boolean,
            default: true
        },
        // 数据列表
        scrollData:{
            type: Array,
            default: null
        },
        // 是否开启横向滚动
        scrollX: {
            type: Boolean,
            default: false
        },
        // 是否派发滚动事件
        listenScroll: {
            type: Boolean,
            default: false
        },
        // 是否派发滚动到底部的事件，用于上拉加载
        pullup: {
            type: Boolean,
            default: false
        },
        // 是否派发顶部下拉的事件，用于下拉刷新
        pulldown: {
            type: Boolean,
            default: false
        },
        // 是否派发列表滚动开始的事件
        beforeScroll: {
            type: Boolean,
            default: false
        },
        // 当数据更新后，刷新scroll的延时
        refreshDelay: {
            type: Number,
            default: 20
        }
    },
    setup() {
        const wrapper = ref(null)
        const state = reactive({
            bs:''
        })
        onMounted(()=>{
            initScroll()
        })
        const initScroll = () =>{
            state.bs = new BScroll(wrapper.value, {
                probeType: 3,
                click: true
            })
            state.bs.on('scroll', () => {
                console.log('scrolling-')
            })
            state.bs.on('scrollEnd', () => {
                console.log('scrollingEnd')
            })
        }
        return {
            ...toRefs(state),
            wrapper
        }
    }
}


</script>

<style lang="scss" scoped>
.scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
}
</style>